<template>
  <div class="app-container">
    <rich-table
      ref="rich-table"
      :search-config="searchConfig"
      :table-config="elTable"
      :async-data="asyncData"
      :pagination-config="paginationConfig"
      :export-config="exportConfig"
      :import-config="importConfig"
      @tap="handleTap"
    >
      <div slot="page-operations">
        <el-button type="primary" size="small">新增</el-button>
      </div>
    </rich-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import { initTableConfig, btnsGroup, list } from './data'
import RichTable from '@/components/RichTable'
export default {
  name: 'Table',
  components: {
    RichTable
  },
  data() {
    return {
      // 搜索条件表单配置
      searchConfig: {
        beforeSearch(val) {
          return val
        },
        formItems: list
      },
      // 表格列配置
      elTable: {
        columns: initTableConfig(),
        // 表格行操作表格
        btnsGroup,
        // 表格高度
        height: 400,
        stripe: true
      },
      asyncData: {
        // 异步数据请求api
        api: getList,
        beforeQuery(query) {
          query.test = '请求前传参'
          return query
        },
        isInitial: true,
        showLoading: true
      },
      paginationConfig: {
        show: true,
        type: 1
      },
      // 导出配置
      exportConfig: {
        show: true
      },
      importConfig: {
        show: false
      }

    }
  },
  mounted() {
    const richTable = this.$refs['rich-table']
    const table = richTable.getTable()
    console.log('表格实例对象', table)
  },
  methods: {
    // 按钮点击事件
    handleTap(event) {
      const { btn, rowInfo } = event
      console.log(btn, rowInfo)
    }

  }
}
</script>
